<template>
  <div>
    <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.12/skins/default/aliplayer-min.css" >
    <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.9.12/aliplayer-min.js"/>
    <!-- 渲染阿里云播放器的标签 -->
    <div id="J_prismPlayer" class="prism-player"/>
  </div>
</template>
<script>
import vodApi from '~/api/vod'
export default {
  async asyncData(ctx) {
    // alert(JSON.stringify(ctx))
    const r = await vodApi.getPlayAuth(ctx.params.vid)
    console.log(r.data.playAuth)
    return {
      vid: ctx.params.vid,
      playAuth: r.data.playAuth
    }
  },
  // 使用nuxt服务器端渲染的前端项目 vue的 createad(不能使用浏览器的api)方法可能会在服务端执行，建议使用mounted
  mounted() {
    // 延时任务:1000毫秒后 执行参数1 函数
    setTimeout(() => {
      // 阿里云播放器的初始化配置
    // eslint-disable-next-line no-undef
      new Aliplayer({
        id: 'J_prismPlayer',
        width: '100%',
        autoplay: false,
        vid: this.vid, // this.$route.params.id,
        playauth: this.playAuth,
        encryptType: 1 // 当播放私有加密流时需要设置。

      }, function(player) {
        console.log('The player is created.')
      })
    }, 1000)
  }
}
</script>
